<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-input-wrapper">
				<text class="search-icon">🔍</text>
				<input 
					class="search-input" 
					v-model="searchKeyword" 
					placeholder="请输入用户名称搜索"
					@input="handleSearch"
				/>
				<view class="search-clear" v-if="searchKeyword" @click="clearSearch">
					<text class="clear-icon">✕</text>
				</view>
			</view>
		</view>
		
		<!-- 钱包列表 -->
		<scroll-view 
			class="wallet-list" 
			scroll-y 
			@scrolltolower="loadMore"
			refresher-enabled
			@refresherrefresh="onRefresh"
			:refresher-triggered="refreshing"
		>
			<!-- 空状态 -->
			<view class="empty-container" v-if="!loading && walletList.length === 0">
				<text class="empty-text">暂无钱包数据</text>
			</view>
			
			<!-- 银行卡样式卡片 -->
			<view 
				class="wallet-card-wrapper" 
				v-for="wallet in walletList" 
				:key="wallet.id"
			>
				<view class="wallet-card">
					<view class="wallet-card-bg"></view>
					<view class="wallet-card-content">
						<view class="wallet-user-name">{{ wallet.userName || '--' }}</view>
						<view class="wallet-balance" :class="getBalanceClass(wallet.balance)">¥{{ formatMoney(wallet.balance) }}</view>
						<view class="wallet-footer">
							<view class="wallet-shop">
								<text class="wallet-value">{{ wallet.officeName || '--' }}</text>
							</view>
							<view class="wallet-status" v-if="wallet.status == '0'">
								<text class="status-text">正常</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 加载更多提示 -->
			<view class="load-more" v-if="loading">
				<text class="load-text">加载中...</text>
			</view>
			<view class="load-more" v-if="!hasMore && walletList.length > 0">
				<text class="load-text">没有更多了</text>
			</view>
		</scroll-view>
		
		<!-- 合计栏 -->
		<view class="summary-bar">
			<view class="summary-content">
				<text class="summary-label">合计：</text>
				<text class="summary-count">{{ walletList.length }}个钱包</text>
				<text class="summary-amount">¥{{ formatMoney(totalBalance) }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKeyword: '', // 搜索关键词
			walletList: [], // 当前显示的钱包列表（过滤后）
			allWalletList: [], // 所有钱包数据
			loading: false,
			refreshing: false,
			hasMore: true,
		}
	},
	onLoad() {
		uni.setNavigationBarTitle({
			title: '用户钱包列表'
		})
	},
	onShow() {
		// 页面显示时加载数据
		this.loadWalletList()
	},
	computed: {
		// 计算总余额
		totalBalance() {
			return this.walletList.reduce((sum, wallet) => {
				const balance = parseFloat(wallet.balance) || 0
				return sum + balance
			}, 0)
		}
	},
	methods: {
		// 加载钱包列表
		loadWalletList() {
			this.loading = true
			
			const params = {}
			
			this.$u.api.wallet.list(params).then(res => {
				this.loading = false
				this.refreshing = false
				
				console.log('钱包列表API响应:', res)
				
				// 兼容响应格式：result='true'
				if (res && (res.result == 'true' || res.result === true)) {
					// 获取数据数组
					let dataList = res.data || []
					
					if (Array.isArray(dataList) && dataList.length > 0) {
						this.allWalletList = dataList.map(item => ({
							id: item.id,
							userName: item.userName || '',
							balance: item.balance || 0,
							status: String(item.status || '0'),
							officeName: item.officeName || ''
						}))
						
						// 应用搜索过滤
						this.filterWalletList()
						
						console.log('处理后的钱包数:', this.walletList.length)
					} else {
						this.allWalletList = []
						this.walletList = []
						console.log('数据为空或格式不正确')
					}
				} else {
					this.allWalletList = []
					this.walletList = []
					console.log('API响应格式不正确:', res)
					uni.showToast({
						title: res.message || '获取数据失败',
						icon: 'none'
					})
				}
			}).catch(err => {
				this.loading = false
				this.refreshing = false
				console.error('加载钱包列表失败:', err)
				uni.showToast({
					title: '加载失败，请重试',
					icon: 'none'
				})
			})
		},
		
		// 过滤钱包列表（按名字模糊搜索）
		filterWalletList() {
			if (!this.searchKeyword || !this.searchKeyword.trim()) {
				// 没有搜索关键词，显示所有
				this.walletList = this.allWalletList
				return
			}
			
			const keyword = this.searchKeyword.trim().toLowerCase()
			
			// 按用户编码或店铺名称模糊搜索
			this.walletList = this.allWalletList.filter(wallet => {
				const userName = (wallet.userName || '').toLowerCase()
				const officeName = (wallet.officeName || '').toLowerCase()
				
				return userName.includes(keyword) || officeName.includes(keyword)
			})
		},
		
		// 处理搜索输入
		handleSearch() {
			// 防抖处理
			clearTimeout(this.searchTimer)
			this.searchTimer = setTimeout(() => {
				this.filterWalletList()
			}, 300)
		},
		
		// 清空搜索
		clearSearch() {
			this.searchKeyword = ''
			this.filterWalletList()
		},
		
		// 获取余额样式类
		getBalanceClass(balance) {
			const num = parseFloat(balance) || 0
			if (num < 0) {
				return 'balance-negative'
			} else if (num > 0) {
				return 'balance-positive'
			}
			return 'balance-zero'
		},
		
		// 格式化金额
		formatMoney(value) {
			if (value === null || value === undefined || value === '') {
				return '0.00'
			}
			const num = parseFloat(value)
			if (isNaN(num)) {
				return '0.00'
			}
			return num.toFixed(2)
		},
		
		// 下拉刷新
		onRefresh() {
			this.refreshing = true
			this.loadWalletList()
		},
		
		// 加载更多
		loadMore() {
			// 目前API返回所有数据，不需要分页
		}
	}
}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: calc(100vh - 50px);
	max-height: calc(100vh - 50px);
}

/* 搜索栏 */
.search-bar {
	background-color: #ffffff;
	padding: 10px 15px;
	border-bottom: 1px solid #f0f0f0;
}

.search-input-wrapper {
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	border-radius: 20px;
	padding: 8px 15px;
}

.search-icon {
	font-size: 16px;
	margin-right: 8px;
}

.search-input {
	flex: 1;
	font-size: 14px;
	color: #333;
}

.search-clear {
	margin-left: 8px;
	padding: 2px 4px;
}

.clear-icon {
	font-size: 16px;
	color: #999;
}

/* 钱包列表 */
.wallet-list {
	min-height: calc(100vh - 100px);
	max-height: calc(100vh - 100px);
	padding: 20rpx 20rpx 100px 20rpx;
	box-sizing: border-box;
}

.empty-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100px 20px;
}

.empty-text {
	font-size: 14px;
	color: #999999;
}

/* 银行卡样式卡片 */
.wallet-card-wrapper {
	padding: 0 0 30rpx 0;
}

.wallet-card {
	position: relative;
	width: 100%;
	height: 380rpx;
	border-radius: 24rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
}

.wallet-card-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	z-index: 1;
}

.wallet-card-bg::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 400rpx;
	height: 400rpx;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
}

.wallet-card-bg::after {
	content: '';
	position: absolute;
	bottom: -30%;
	left: -10%;
	width: 300rpx;
	height: 300rpx;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
}

.wallet-card-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 40rpx;
	color: #ffffff;
}

.wallet-user-name {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	letter-spacing: 2rpx;
}

.wallet-balance {
	font-size: 60rpx;
	font-weight: bold;
	letter-spacing: 4rpx;
	margin: 40rpx 0;
	font-family: 'Arial', sans-serif;
}

.wallet-balance.balance-positive {
	color: #a8e6cf;
}

.wallet-balance.balance-negative {
	color: #ffb3ba;
}

.wallet-balance.balance-zero {
	color: #ffffff;
}

.wallet-footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: auto;
}

.wallet-shop {
	display: flex;
	flex-direction: column;
}

.wallet-label {
	font-size: 24rpx;
	opacity: 0.8;
	margin-bottom: 8rpx;
}

.wallet-value {
	font-size: 32rpx;
	font-weight: bold;
}

.wallet-status {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8rpx 20rpx;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 20rpx;
}

.status-text {
	font-size: 24rpx;
	font-weight: bold;
}

/* 加载更多 */
.load-more {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
}

.load-text {
	font-size: 12px;
	color: #999999;
}

/* 合计栏 */
.summary-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ffffff;
	border-top: 1px solid #f0f0f0;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	z-index: 100;
}

.summary-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.summary-label {
	font-size: 28rpx;
	color: #333333;
	font-weight: bold;
}

.summary-count {
	font-size: 26rpx;
	color: #666666;
	margin-left: 20rpx;
}

.summary-amount {
	font-size: 36rpx;
	color: #ff4069;
	font-weight: bold;
	margin-left: auto;
}
</style>
